<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <link rel="stylesheet" href="dist/styles/iview.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/ol.css">
    <script src="js/js.cookie.min.js"></script>
    <script src="js/polyfill.min.js"></script>
    <script>
        var token = Cookies.get("token");
        if (token == undefined) {
            window.location.href = "index.html";
        };
    </script>
</head>

<body>
    <!-- root -->
    <div id="app">
        <div class="header-wraper">
            <app-header @change-nav="changeComponent" :componentid="activeName"></app-header>
        </div>
        <div class="view-wraper">
            <keep-alive include="monitor">
                <component :is="activeName" ref="my-component" @jump-report="jumpReport"></component>
            </keep-alive>
        </div>
        <waring-component></waring-component>
    </div>


    <!-- 头部模版 -->
    <script type="text/x-template" id="header-template">
        <div class="app-header">
            <div class="logo">
                <!-- <Icon type="ios-planet" style="vertical-align:top;font-size:50px;margin-top:2px"></Icon> -->
                <img src="images/logo.png" width="50px" height="50px" style="display:inline-block;margin-top:5px" />
                <span style="font-size:18px;vertical-align:top;">{{$t("login.title")}}</span>
            </div>
            <div class="app-nav">
                <i-menu mode="horizontal" theme="dark" :active-name="componentid" v-on:on-select="changeNav">
                        <template v-for="item in headMenuList" :key="item.name">
                            <menuItem :name="item.name" v-show="item.isShow">  
                                <Icon :type="item.icon"></Icon>
                                {{item.title}}
                            </menuItem> 
                        </template>
                </i-menu>
            </div>
            <div class="site_links">
                <ul>
                    <li style="padding-right:8px;">{{name}}</li>
                    <li style="padding:0" v-if="userType < 3">|</li>
                    <li v-if="userType < 3">  
                        <span  @click="jumpMessageHtml"><Icon type="ios-text" style="margin-right:3px"></Icon>{{$t("alarm.message")}}</span>
                    </li>
                    <li style="padding:0">|</li>
                    <li>
                        <span  @click="serviceModal=true"><Icon type="ios-contact" style="margin-right:3px"></Icon>{{$t("header.contact")}}</span>
                    </li>
                    <li style="padding:0">|</li>
                    <li>
                        <span  @click="changePassword"><Icon type="md-create" style="margin-right:3px"></Icon>{{$t("header.changePwd")}}</span>
                    </li>
                    <li style="padding:0">|</li>
                    <li>
                        <span @click="showSetup"><Icon type="ios-hammer-outline" style="margin-right:3px"></Icon>{{$t("header.setting")}}</span> 
                    </li>
                    <li style="padding:0">|</li>
                    <li>
                        <span @click="logout"><Icon type="ios-power" style="margin-right:3px"></Icon>{{$t("header.logout")}}</span>
                    </li>
                </ul>
            </div>

            <Modal v-model="modal" width="460">
                <p slot="header" style="color:#2D8CF0;text-align:center">
                    <Icon type="ios-hammer-outline"></Icon>
                    <span>{{$t("header.setting")}}</span>
                </p>
                <div style="text-align:center">
                    <Row style="margin: 10px 0">
                        <i-col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.setIntaival")}} : &nbsp;</i-col>
                        <i-col span="16" style="height: 100%;line-height:32px;">
                            <input-number :max="1800" :min="5" v-model="intervalTime"></input-number>
                        </i-col>
                    </Row>
                </div>
                <div slot="footer" style="padding:12.5px 0;">
                    <div v-if="userType < 10">
                        <Row style="margin: 10px 0">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.name")}}  : &nbsp;</i-col>
                            <i-col span="16">
                                <i-input v-model.trim="nickname"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">QQ  : &nbsp;</i-col>
                            <i-col span="16">
                                <i-input v-model.trim="qq"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.wechat")}} : &nbsp;</i-col>
                            <i-col span="16">
                                <i-input v-model.trim="wechat"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.phone")}} : &nbsp;</i-col>
                            <i-col span="16">
                                <i-input v-model.trim="phone"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.email")}} : &nbsp;</i-col>
                            <i-col span="16">
                                <i-input v-model.trim="email"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">多点登陆 : &nbsp;</i-col>
                            <i-col span="16">
                                <i-select v-model="multilogin" style="text-align:center;">
                                    <i-option value="1" style="text-align:center;">是</i-option>
                                    <i-option value="0" style="text-align:center;">否</i-option>
                                </i-select>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="16" :offset="5">
                                <i-button type="primary" style="width:100%;" @click="handleEditMyInfo">{{$t("header.submit")}}</i-button>
                            </i-col>
                        </Row> 
                    </div>
                </div>
            </Modal>

            <Modal v-model="modalPass" width="510">
                <p slot="header" style="color:#2D8CF0;text-align:center">
                    <Icon type="ios-hammer-outline"></Icon>
                    <span>{{$t("header.changePwd")}}</span>
                </p>
                <div style="text-align:center">
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.oldPwd")}}  : &nbsp;</i-col>
                        <i-col span="16">
                            <i-input v-model.trim="oldPass"></i-input>
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.newPwd")}}  : &nbsp;</i-col>
                        <i-col span="16">
                            <i-input v-model.trim="newPass" type="password"></i-input>
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.confirmPwd")}} : &nbsp;</i-col>
                        <i-col span="16">
                            <i-input v-model.trim="confirmPass" type="password"></i-input>
                        </i-col>
                    </Row>
                </div>
                <div slot="footer" >
                    <i-button style="width: 100%" @click="changeUserPass" type="primary">{{$t("header.submit")}}</i-button>
                </div>
            </Modal>

            <Modal v-model="serviceModal" width="510">
                <p slot="header" style="color:#2D8CF0;text-align:center">
                    <Icon type="ios-contact"></Icon>
                    <span>{{$t("header.info")}}</span>  
                </p>  
                <div style="text-align:center">
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.name")}}  : &nbsp;</i-col>
                        <i-col span="16" style="height: 100%;line-height:32px;">
                            {{creatername}}
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">QQ  : &nbsp;</i-col>
                        <i-col span="16" style="height: 100%;line-height:32px;">
                            <a :href="'tencent://message/?uin='+createrqq+'&amp;Site=九护设备&amp;Menu=yes'" id="floatQQ"> {{createrqq}}</a>
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.wechat")}} : &nbsp;</i-col>
                        <i-col span="16" style="height: 100%;line-height:32px;">
                            {{ createrwechat}}
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.phone")}} : &nbsp;</i-col>
                        <i-col span="16" style="height: 100%;line-height:32px;">
                            {{ createrphone}}
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.email")}} : &nbsp;</i-col>
                        <i-col span="16" style="height: 100%;line-height:32px;">
                            {{createremail}}
                        </i-col>
                    </Row>
                </div>
            </Modal>
        </div>
    </script>

    <!-- 定位监控 -->
    <script type="text/x-template" id="monitor-template">
        <div class="monitor-wraper">
            <div class="devices-container">
                <div class="device-contorller">
                    <ul class="device-state">
                        <li :class="{active:selectedState=='all'}" @click="selectedStateNav('all')">
                            <p class="p-icon"><Icon :size="24" type="ios-apps"/></p>
                            <p class="dev-count">{{$t("monitor.all")}}({{allDevCount}})</p>  
                        </li>
                        <li :class="{active:selectedState=='online'}" @click="selectedStateNav('online')">
                            <p class="p-icon"><Icon :size="24" type="md-checkmark-circle" /></p> 
                            <p class="dev-count">{{$t("monitor.online")}}({{onlineDevCount}})</p>
                        </li>
                        <li :class="{active:selectedState=='offline'}" @click="selectedStateNav('offline')">
                            <p class="p-icon"><Icon :size="24" type="ios-information-circle" /></p> 
                            <p class="dev-count">{{$t("monitor.offline")}}({{offlineDevCount}})</p>
                        </li>
                    </li>
                    <div class="device-soso">
                         <div class="search-wrapper">
                            <i-input v-model.trim="sosoValue"  icon="ios-search-outline" @on-change="sosoValueChange" @on-blur="blur" @on-focus="focus" :placeholder="placeholder"></i-input>
                            <transition name="fade">
                                <ul class="search-item-wrapper" v-show="isShowMatchDev">
                                    <li  class="demo-auto-complete-item" v-for="item in filterData">
                                        <div class="demo-auto-complete-group">
                                            <span>{{ item.groupname }}</span>
                                        </div>
                                        <i-option v-for="option in item.devices" :value="option.groupname" :key="option.groupname">
                                            <span :style="{color:option.isOnline ? '#33DAD0':'#B1BBC2'}" @click="sosoSelect(option)" class="demo-auto-complete-title" >{{ option.allDeviceIdTitle }}</span>
                                        </i-option>
                                    </li>
                                </ul>
                            </transition>
                        </div>
                    </div>
                </div>
                <div class="device-tree" ref="treeWraper">                   
                    <!-- left tree controller 不显示公司名 -->
                    <dl class="noselect" v-if="!isShowCompanyName" class="dl-inner-wrapper">
                        <!-- all -->
                        <template v-for="(group , index) in groups" :key="index" v-if="selectedState==='all'">
                            <dt style="padding:5px;border-bottom:1px solid #ddd;cursor: pointer;" @click="openGroupItem(group)">
                                <Icon type="ios-arrow-down" v-if="group.expand"/>
                                <Icon type="ios-arrow-forward" v-else/>
                                <b v-text="group.title"></b>
                            </dt>
                            <dd style="padding:5px;border-bottom:1px solid #ddd" v-if="group.expand">
                                <div v-for="(device , index) in group.devices" :key="device.deviceid" :data-id="device.deviceid" style="padding-left:15px">
                                    <div :class="{'active-dev-offline':device.isSelected}" style="margin:3px 0;" :ref="device.deviceid">
                                        <div style="padding:3px 5px;cursor: pointer;" :style="{color: device.isOnline ? '#33DAD0' : '#B1BBC2'}" @click="selectedDev(device)">
                                            <Icon type="md-person"/> 
                                            <span v-text="device.devicetitle"></span> 
                                        </div>
                                        <ul class="device-controller" v-if="device.isSelected">
                                            <li @click="editDevice(device)"><Icon type="ios-create"/><p>{{$t("monitor.edit")}}</p><li>
                                            <li @click="playBack(device.deviceid)"><Icon type="md-planet"/><p>{{$t("monitor.track")}}</p><li>
                                            <li @click="trackMap(device.deviceid)"><Icon type="md-person"/><p>{{$t("monitor.following")}}</p><li> 
                                            <li  @mouseover="handleMousemove($event)">
                                                <Dropdown trigger="click" transfer :placement="placement" @on-click="handleClickMore" style="width:100%;">
                                                    <Icon type="ios-list"/><p>{{$t("monitor.more")}}</p>
                                                    <i-dropdown-menu slot="list">
                                                        <DropdownItem name="name1"> 
                                                            <Dropdown transfer placement="right-start" @on-click="handleClickDirective" style="width:100%;">
                                                                {{$t("monitor.deviceCmd")}}
                                                                <Icon type="ios-arrow-forward"></Icon>
                                                                <i-dropdown-menu slot="list">
                                                                    <template v-for="(item, index) in currentDevDirectiveList" :key="item.cmdcode">
                                                                        <DropdownItem :name="item.cmdcode" >{{item.cmdname}}</DropdownItem>
                                                                    </template>
                                                                </i-dropdown-menu>
                                                            </Dropdown>                                                                                            
                                                        </DropdownItem>
                                                        <DropdownItem name="luyin" v-show="isShowRecordBtn">{{$t("monitor.media")}}</DropdownItem>
                                                        <DropdownItem name="bms" v-show="isShowBmsBtn">电池管理</DropdownItem>
                                                        <DropdownItem name="obd" v-show="isShowObdBtn">OBD</DropdownItem>
                                                        <DropdownItem name="weight" v-show="isShowWeightBtn">称重</DropdownItem>
                                                        <DropdownItem name="watermeter" v-show="isShowWatermeterBtn">水表</DropdownItem>
                                                        <DropdownItem name="video" v-show="isShowVideoBtn">视频</DropdownItem>
                                                        <DropdownItem name="cmdrecord">{{$t("monitor.cmdRecord")}}</DropdownItem>
                                                        <DropdownItem name="alarmList">{{$t("monitor.alarmRecords")}}</DropdownItem>
                                                        <DropdownItem name="phoneAlarm">{{$t("reportForm.phoneAlarm")}}</DropdownItem>
                                                        <DropdownItem name="devbaseinfo">{{$t("monitor.devBaseInfo")}}</DropdownItem>
                                                    </i-dropdown-menu>
                                                </Dropdown>
                                            <li> 
                                        </ul>
                                    </div>
                                </div>
                            </dd>
                        </template>
                        <!-- online -->
                        <template v-for="(group , index) in groups" :key="index" v-if="selectedState==='online'">
                                <dt style="padding:5px;border-bottom:1px solid #ddd;cursor: pointer;" @click="openGroupItem(group)" v-if="group.isShow">
                                    <Icon type="ios-arrow-down" v-if="group.expand"/>
                                    <Icon type="ios-arrow-forward" v-else/>
                                    <b v-text="group.title"></b>
                                </dt>
                                <dd style="padding:5px;border-bottom:1px solid #ddd" v-if="group.expand && group.isShow">
                                    <div v-for="(device , index) in group.devices" :key="device.deviceid" style="padding-left:15px" v-if="device.isOnline">
                                        <div :class="{'active-dev-offline':device.isSelected}" style="margin:3px 0;" :ref="device.deviceid">
                                            <div style="padding:3px 5px;cursor: pointer;" :style="{color: device.isOnline ? '#33DAD0' : '#B1BBC2'}" @click="selectedDev(device)">
                                                <Icon type="md-person"/> 
                                                <span v-text="device.devicetitle"></span> 
                                            </div>
                                            <ul class="device-controller" v-if="device.isSelected">
                                                <li @click="editDevice(device)"><Icon type="ios-create"/><p>{{$t("monitor.edit")}}</p><li>
                                                <li @click="playBack(device.deviceid)"><Icon type="md-planet"/><p>{{$t("monitor.track")}}</p><li>
                                                <li @click="trackMap(device.deviceid)"><Icon type="md-person"/><p>{{$t("monitor.following")}}</p><li> 
                                                <li  @mouseover="handleMousemove($event)">
                                                    <Dropdown trigger="click" transfer :placement="placement" @on-click="handleClickMore" style="width:100%;">
                                                        <Icon type="ios-list"/><p>{{$t("monitor.more")}}</p>
                                                        <i-dropdown-menu slot="list">
                                                            <DropdownItem name="name1"> 
                                                                <Dropdown transfer placement="right-start" @on-click="handleClickDirective" style="width:100%;">
                                                                    {{$t("monitor.deviceCmd")}}
                                                                    <Icon type="ios-arrow-forward"></Icon>
                                                                    <i-dropdown-menu slot="list">
                                                                        <template v-for="(item, index) in currentDevDirectiveList" :key="item.cmdcode">
                                                                            <DropdownItem :name="item.cmdcode" >{{item.cmdname}}</DropdownItem>
                                                                        </template>
                                                                    </i-dropdown-menu>
                                                                </Dropdown>                                                                                            
                                                            </DropdownItem>
                                                            <DropdownItem name="luyin" v-show="isShowRecordBtn">{{$t("monitor.media")}}</DropdownItem>
                                                            <DropdownItem name="bms" v-show="isShowBmsBtn">电池管理</DropdownItem>
                                                            <DropdownItem name="obd" v-show="isShowObdBtn">OBD</DropdownItem>
                                                            <DropdownItem name="weight" v-show="isShowWeightBtn">称重</DropdownItem>
                                                            <DropdownItem name="watermeter" v-show="isShowWatermeterBtn">水表</DropdownItem>
                                                            <DropdownItem name="video" v-show="isShowVideoBtn">视频</DropdownItem>
                                                            <DropdownItem name="cmdrecord">{{$t("monitor.cmdRecord")}}</DropdownItem>
                                                            <DropdownItem name="alarmList">{{$t("monitor.alarmRecords")}}</DropdownItem>
                                                            <DropdownItem name="phoneAlarm">{{$t("reportForm.phoneAlarm")}}</DropdownItem>
                                                            <DropdownItem name="devbaseinfo">{{$t("monitor.devBaseInfo")}}</DropdownItem>
                                                        </i-dropdown-menu>
                                                    </Dropdown>
                                                <li> 
                                            </ul>
                                        </div>
                                    </div>
                                </dd>
                        </template>   
                        <!-- offline -->
                        <template v-for="(group , index) in groups" :key="index" v-if="selectedState==='offline'">
                                <dt style="padding:5px;border-bottom:1px solid #ddd;cursor: pointer;" @click="openGroupItem(group)" v-if="group.isShow">
                                    <Icon type="ios-arrow-down" v-if="group.expand"/>
                                    <Icon type="ios-arrow-forward" v-else/>
                                    <b v-text="group.title"></b>
                                </dt>
                                <dd style="padding:5px;border-bottom:1px solid #ddd" v-if="group.expand && group.isShow">
                                    <div v-for="(device , index) in group.devices" :key="device.deviceid" style="padding-left:15px" v-if="!device.isOnline">
                                        <div :class="{'active-dev-offline':device.isSelected}" style="margin:3px 0;" :ref="device.deviceid">
                                            <div style="padding:3px 5px;cursor: pointer;" :style="{color:'#B1BBC2'}" @click="selectedDev(device)">
                                                <Icon type="md-person"/> 
                                                <span v-text="device.devicetitle"></span> 
                                            </div>
                                            <ul class="device-controller" v-if="device.isSelected">
                                                <li @click="editDevice(device)"><Icon type="ios-create"/><p>{{$t("monitor.edit")}}</p><li>
                                                <li @click="playBack(device.deviceid)"><Icon type="md-planet"/><p>{{$t("monitor.track")}}</p><li>
                                                <li @click="trackMap(device.deviceid)"><Icon type="md-person"/><p>{{$t("monitor.following")}}</p><li> 
                                                <li  @mouseover="handleMousemove($event)">
                                                    <Dropdown trigger="click" transfer :placement="placement" @on-click="handleClickMore" style="width:100%;">
                                                        <Icon type="ios-list"/><p>{{$t("monitor.more")}}</p>
                                                        <i-dropdown-menu slot="list">
                                                            <DropdownItem name="name1"> 
                                                                <Dropdown transfer placement="right-start" @on-click="handleClickDirective" style="width:100%;">
                                                                    {{$t("monitor.deviceCmd")}}
                                                                    <Icon type="ios-arrow-forward"></Icon>
                                                                    <i-dropdown-menu slot="list">
                                                                        <template v-for="(item, index) in currentDevDirectiveList" :key="item.cmdcode">
                                                                            <DropdownItem :name="item.cmdcode" >{{item.cmdname}}</DropdownItem>
                                                                        </template>
                                                                    </i-dropdown-menu>
                                                                </Dropdown>                                                                                            
                                                            </DropdownItem>
                                                            <DropdownItem name="luyin" v-show="isShowRecordBtn">{{$t("monitor.media")}}</DropdownItem>
                                                            <DropdownItem name="bms" v-show="isShowBmsBtn">电池管理</DropdownItem>
                                                            <DropdownItem name="obd" v-show="isShowObdBtn">OBD</DropdownItem>
                                                            <DropdownItem name="weight" v-show="isShowWeightBtn">称重</DropdownItem>
                                                            <DropdownItem name="watermeter" v-show="isShowWatermeterBtn">水表</DropdownItem>
                                                            <DropdownItem name="video" v-show="isShowVideoBtn">视频</DropdownItem>
                                                            <DropdownItem name="cmdrecord">{{$t("monitor.cmdRecord")}}</DropdownItem>
                                                            <DropdownItem name="alarmList">{{$t("monitor.alarmRecords")}}</DropdownItem>
                                                            <DropdownItem name="phoneAlarm">{{$t("reportForm.phoneAlarm")}}</DropdownItem>
                                                            <DropdownItem name="devbaseinfo">{{$t("monitor.devBaseInfo")}}</DropdownItem>
                                                        </i-dropdown-menu>
                                                    </Dropdown>
                                                <li> 
                                            </ul>
                                        </div>
                                    </div>
                                </dd>
                        </template>
                    </dl>      
                </div>
                <div class="group-spin-wraper" v-if="isLoadGroup">
                    <Spin fix size="large"></Spin>
                </div>
            </div>
            <div class="map-wraper">
                <div class="map_manager">
                    <div style="float:left;height:35px; line-height:35px;padding-left:15px;color:red;font-size:12px;">{{intervalTime}}{{$t("monitor.refreshAfter")}}</div>
                    <ul class="ul-manager-wraper"> 
                        <li class="maps">
                            <i-select v-model="mapType" size="small" style="width:100px">
                                <i-option v-for="item in mapList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                            </i-select>
                        </li>
                        <li class="gongju">
                            <Dropdown transfer>
                                <i-button type="primary" size="small">
                                    {{$t("monitor.tools")}}<Icon type="ios-arrow-down"></Icon>
                                </i-button>
                                <i-dropdown-menu slot="list">
                                    <DropdownItem name="name1">
                                        <i-button type="primary" @click.stop="openDistance" size="small">{{$t("monitor.ranging")}}</i-button>
                                    </DropdownItem>
                                </i-dropdown-menu>
                            </Dropdown>
                        </li>
                    </ul>
                </div>
                <div class="spin-wraper" v-if="isSpin" style="z-index:10">
                    <Spin fix size="large"></Spin>
                </div>
                <div id="my-map"></div>
            </div>
			<!-- 编辑设备模态 -->
            <Modal v-model="editDevModal" width="500">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="ios-create-outline"></Icon>
                    <span>{{$t("monitor.editDev")}}</span>
                </p>
                 <div style="text-align:center">
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("monitor.devName")}} : &nbsp;</i-col>
                        <i-col span="16">
                            <i-input v-model.trim="editDevData.devicename" :disabled="editDevData.disabled"></i-input>
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("monitor.phoneNumber")}} : &nbsp;</i-col>
                        <i-col span="16">
                            <i-input v-model.trim="editDevData.simnum" :disabled="editDevData.disabled"></i-input>
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("monitor.remarks")}} : &nbsp;</i-col>
                            <i-col span="16">
                                <i-input v-model.trim="editDevData.remark" type="textarea" :rows="4" :disabled="editDevData.disabled"></i-input>
                            </i-col>
                        </Row>
                </div>
                <div slot="footer">
                    <i-button type="primary"  @click="handleEditDevFn" style="width: 100%" :disabled="editDevData.disabled">{{$t("monitor.confirm")}}</i-button>
                </div>
            </Modal>   

            <!-- 下发指令模态 -->
            <Modal v-model="dispatchDirectiveModal" width="460">
                    <p slot="header" style="color:#f60;text-align:center">
                        <Icon type="ios-create-outline"></Icon>
                        <span>{{ selectedCmdInfo.cmdName }}</span>
                    </p>

             
                    <div style="text-align:center" >
                        <Row style="margin: 10px 0">
                            <i-col span="24" style="height: 100%;text-align:center;line-height:32px;font-size:14px;">{{selectedCmdInfo.cmddescr}}</i-col>
                        </Row>

                        <Row style="margin: 10px 0" v-if="selectedCmdInfo.type === 'list'">
                            <i-col :offset="5" span="16">
                                <i-select v-model="selectedTypeVal">
                                    <i-option v-for="item in selectedCmdInfo.params" :value="item.type" :key="item.type">{{ item.value }}</i-option>
                                </i-select>
                            </i-col>
                        </Row>

                        <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'text'">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{item.desc}} : &nbsp;</i-col>
                            <i-col span="16">
                                <i-input v-model.trim="cmdParams[item.type]"></i-input>
                            </i-col>
                        </Row>
    
                        <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'timeperiod'">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{item.desc}} : &nbsp;</i-col>
                            <i-col span="16">
                                <Time-Picker format="HH:mm"  type="timerange" placeholder="选择时间段" v-model="cmdParams[item.type]"></Time-Picker>
                            </i-col>
                        </Row>

                        <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'remind'">
                            <i-col span="3" style="height: 100%;text-align:right;line-height:32px;">{{item.desc}} : &nbsp;</i-col>
                            <i-col span="18">
                                <Row>
                                    <i-col span="16">
                                        <Time-Picker format="HH:mm" placeholder="选择时间" v-model="cmdParams[item.type].time"></Time-Picker>
                                    </i-col>    
                                    <i-col span="8" style="height: 100%;line-height:32px;">
                                        <i-switch v-model="cmdParams[item.type].switch" />
                                    </i-col>    
                                </Row>
                                <Row style="margin: 10px 0">
                                    <i-col span="16">
                                        <Radio-Group v-model="cmdParams[item.type].type">
                                            <Radio label="1"> <span>一次</span></Radio>
                                            <Radio label="2"> <span>每天</span></Radio>
                                            <Radio label="3"><span>每周</span></Radio>
                                        </Radio-Group>
                                    </i-col>       
                                </Row>
                                <Row style="margin: 10px 0" v-if="cmdParams[item.type].type === '3' ">
                                    <i-col span="24">
                                        <CheckboxGroup v-model="cmdParams[item.type].weekselected">
                                            <Checkbox label="一"><span>一</span></Checkbox>
                                            <Checkbox label="二"><span>二</span></Checkbox>
                                            <Checkbox label="三"><span>三</span></Checkbox>
                                            <Checkbox label="四"><span>四</span></Checkbox>
                                            <Checkbox label="五"><span>五</span></Checkbox>
                                            <Checkbox label="六"><span>六</span></Checkbox>
                                            <Checkbox label="日"><span>日</span></Checkbox>
                                        </CheckboxGroup>
                                    </i-col>       
                                </Row>
                            </i-col>
                        </Row>

                        <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'time'">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{item.desc}} : &nbsp;</i-col>
                            <i-col span="16">
                                <Time-Picker format="HH:mm"  type="time" placeholder="选择时间" v-model="cmdParams[item.type]"></Time-Picker>
                            </i-col>
                        </Row>

                        <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'weektime'">
                            <i-col span="3" style="height: 100%;text-align:right;line-height:32px;">
                                    <Row style="margin: 10px 0">
                                        <i-col span="24">
                                            {{item.desc}} : &nbsp;    
                                        </i-col>       
                                    </Row>  
                            </i-col>
                            <i-col span="18">                  
                                    <Row style="margin: 10px 0">
                                        <i-col span="24">
                                            <Time-Picker format="HH:mm"  type="time" placeholder="选择时间" v-model="cmdParams[item.type].time"></Time-Picker>
                                        </i-col>       
                                    </Row>                                                 
                                    <Row style="margin: 10px 0">
                                        <i-col span="24">
                                            <CheckboxGroup v-model="cmdParams[item.type].weekselected">
                                                <Checkbox label="一"><span>一</span></Checkbox>
                                                <Checkbox label="二"><span>二</span></Checkbox>
                                                <Checkbox label="三"><span>三</span></Checkbox>
                                                <Checkbox label="四"><span>四</span></Checkbox>
                                                <Checkbox label="五"><span>五</span></Checkbox>
                                                <Checkbox label="六"><span>六</span></Checkbox>
                                                <Checkbox label="日"><span>日</span></Checkbox>
                                            </CheckboxGroup>
                                        </i-col>       
                                    </Row>                                                 
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0" v-show="selectedCmdInfo.cmdpwd">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">密码 : &nbsp;</i-col>
                            <i-col span="16">
                                <i-input v-model.trim="cmdPwd" style="width:100%;"></i-input>
                            </i-col>
                        </Row>    
                    </div>

        

                    <div slot="footer">
                        <i-button type="primary"  @click="disposeDirectiveFn" style="width: 100%">{{$t("monitor.confirm")}}</i-button>
                    </div>
            </Modal>  

            <!-- 设备基本信息模态 -->
            <Modal v-model="deviceInfoModal" width="500">
                    <p slot="header" style="color:#f60;text-align:center">
                        <Icon type="ios-create-outline"></Icon>
                        <span>{{$t("monitor.devBaseInfo")}}</span>
                    </p>
                     <div style="text-align:center">
                        <Row>
                            <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.customer")}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                {{deviceBaseInfo.companyname}}     
                            </i-col>
                        </Row>
                        <Row>
                            <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.groupName")}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                {{deviceBaseInfo.groupname}}     
                            </i-col>
                        </Row>
                        <Row>
                            <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.devNumber")}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                {{deviceBaseInfo.deviceid}}     
                            </i-col>
                        </Row>
                        <Row>
                            <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.devName")}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                {{deviceBaseInfo.devicename}}     
                            </i-col>
                        </Row>
                        <Row>
                                <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.factoryNum")}} : &nbsp;</i-col>
                                <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                    {{deviceBaseInfo.manufactureid}}     
                                </i-col>
                        </Row>
                        <Row>
                                <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.clientType")}} : &nbsp;</i-col>
                                <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                    {{deviceBaseInfo.terminalmodelno}}     
                                </i-col>
                        </Row>
                        
                       
                        <Row>
                                <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.expireTime")}} : &nbsp;</i-col>
                                <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                    {{deviceBaseInfo.isfree === 1 ? '终身免费' : deviceBaseInfo.overdueDateStr}}     
                                </i-col>
                        </Row>
                        <Row>
                            <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.phoneNumber")}}  : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                {{deviceBaseInfo.simnum}}     
                            </i-col>
                        </Row>
                        <Row>
                            <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">IMEI : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                {{deviceBaseInfo.imei}}     
                            </i-col>
                        </Row>
                        <Row>
                                <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">IMSI : &nbsp;</i-col>
                                <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                    {{deviceBaseInfo.simimsi}}     
                                </i-col>
                        </Row>  
                        <Row>
                            <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">ICCID : &nbsp;</i-col>
                                    <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                        {{deviceBaseInfo.simiccid}}     
                            </i-col>
                        </Row>                      
                    </div>
                    <div slot="footer">
                        <i-button type="primary"  @click="deviceInfoModal=false" style="width: 100%">{{$t("monitor.close")}}</i-button>
                    </div>
            </Modal>  

                   
            <!-- 指令记录 -->
            <Modal v-model="directiveReportModal" width="860">
                    <p slot="header" style="color:#f60;text-align:center">
                        <Icon type="ios-create-outline"></Icon>
                        <span>{{currentDeviceName}} - {{$t("monitor.cmdRecord")}}</span>
                    </p>
                    <div>
                        <Tabs type="card">
                            <tab-pane :label="$t('monitor.toSendCmd')">
                                <i-table :columns="cacheColumns" height="280" :data="cacheTableData" :loading="loading"></i-table>
                            </tab-pane>
                            <tab-pane :label="$t('monitor.directivesSent')">
                                <i-table :columns="sendColumns" height="280" :data="sendTableData" :loading="loading"></i-table>
                            </tab-pane>
                        </Tabs>       
                    </div>
                    <div slot="footer">
                        <i-button type="primary"  @click="directiveReportModal = false" style="width: 100%">{{$t("monitor.confirm")}}</i-button>
                    </div>
            </Modal> 
        </div>
    </script>

    <!-- 统计报表 -->
    <script type="text/x-template" id="report-template">
        <div class="report-wraper full">
            <div class="report-left-wrap">
                    <div class="mar-nav">
                            <i-menu :theme="theme" @on-select="selectditem" :active-name="activeName" :open-names="openedNames" ref="navMenu">
                                <template v-for="(group,index) in reportNavList">
                                    <Submenu :name="group.name" :key="index">
                                            <template slot="title">
                                                <Icon :type="group.icon"></Icon>
                                                <span>{{ group.title}}</span>
                                            </template>
                                            <template v-for="(item,idx) in group.children">
                                                <MenuItem :name="item.name" :key="idx">
                                                    <Icon :type="item.icon"></Icon>
                                                    {{item.title}}
                                                </MenuItem>
                                            </template>
                                    </Submenu>
                                </template>
                            </i-menu>
                    </div>    
            </div>
            <div class="report-right-wrap" id="report-right-wrap"></div>
        </div>
    </script>

    <!-- 后台管理 -->
    <script type="text/x-template" id="manager-template">
        <div class="manager-wraper">
            <div class="mar-nav">
                    <i-menu :theme="theme" @on-select="selectditem" accordion>
                        <template v-for="(group,index) in navList">
                            <Submenu :name="group.name" :key="index">
                                    <template slot="title">
                                        <Icon :type="group.icon"></Icon>
                                        <span>{{ group.title}}</span>
                                    </template>
                                    <template v-for="(item,idx) in group.children">
                                        <MenuItem :name="item.name" :key="idx">
                                            <Icon :type="item.icon"></Icon>
                                            {{item.title}}
                                        </MenuItem>
                                    </template>
                            </Submenu>
                        </template>
                    </i-menu>
            </div>
            <div class="mar-view" id="mar-view"></div>
        </div>
    </script>

    <!-- 系统参数 -->
    <script type="text/x-template" id="systemparam-template"> 
        <div class="manager-wraper">
            <div class="mar-nav">
                <i-menu :theme="theme" @on-select="selectditem" accordion>
                    <template v-for="(group,index) in navList">
                        <Submenu :name="group.name" :key="index" v-if="group.children">
                            <template slot="title">
                                <Icon :type="group.icon"></Icon>
                                <span>{{ group.title}}</span>
                            </template>
                            <template v-for="(item,idx) in group.children">
                                <MenuItem :name="item.name" :key="idx">
                                    <Icon :type="item.icon"></Icon>
                                    {{item.title}}
                                </MenuItem>
                            </template>
                        </Submenu>

                        <MenuItem :name="group.name" v-else="group.children">
                            <Icon :type="group.icon" />
                            <span>{{ group.title}}</span>
                        </MenuItem>
                    </template>
                </i-menu>
            </div>
            <div class="mar-view" id="system-view"></div>
        </div>
    </script>

    <!-- 轨迹调试 -->
    <script type="text/x-template" id="trackdebug-template"> 
        <div class="trackdebug-wraper">
            <div class="control-wrapper">
                <ul>
                    <li>
                        <i-input 
                            style="width: auto;width:100%;" 
                            v-model.trim="deviceId" 
                            placeholder="input device id"
                            @on-blur="onBlur">
                            <Icon type="ios-search" slot="suffix" />
                        </i-input>
                    </li>
                    <li>
                        <date-picker type="date" 
                                    style="width: 180px;" 
                                    v-model="startDate"  
                                    :clearable="false" 
                                    :editable="false"></date-picker>
                    </li>
                    <li>
                        <i-button @click="prevDay">上一天</i-button>
                    </li>
                    <li>
                        <i-button @click="nextDay">下一天</i-button>
                    </li>
                    <li>
                        <i-button @click="refresh">刷新</i-button>
                    </li>
                    <li>
                        <i-input 
                            style="width: auto;width:100%;" 
                            v-model.trim="filterStr" 
                            placeholder="过滤">
                            <Icon type="ios-search" slot="suffix" />
                        </i-input>
                    </li>
                    <li>
                        <i-button @click="filterTypeDesc">过滤</i-button>
                    </li>
                    <li style="float:right">
                        <i-button @click="loginRecords">登录记录</i-button>
                    </li>
                    <li style="float:right">
                        <i-button @click="lichengModal=true">设置总里程</i-button>
                    </li>
                    <li style="float:right">
                        <i-button @click="openClearTracksModal">清除使用记录</i-button>
                    </li>
                    <li style="float:right">
                        <i-button @click="openServersetting">服务器参数设置</i-button>
                    </li>
                </ul>
            </div>
            <div class="table-wrappr" ref="tableWrappr">
                <i-table :height="tableHeight" border :columns="columns" :data="tableData" :loading="loading" @on-row-click="onRowClick"></i-table>
                <div class="content-wrap" v-show="isShowCard">
                    <Card style="width:650px">
                        <p slot="title">
                            <Icon type="ios-film-outline"></Icon>
                            Content
                        </p>
                        <a href="#" slot="extra" @click.prevent="closeCard">
                            <Icon type="ios-loop-strong"></Icon>
                            X
                        </a>
                        <div id="content-string" style="max-height:400px;overflow-y:auto;">
                            {{contentString}}
                        </div>
                    </Card>
                </div>
            </div>
            <div class="page-wrappr">
                <div>
                    <Page :total="total" show-total @on-change="onChange" :page-size="30" :current="currentIndex" />
                </div>
            </div>
            <Modal
                v-model="clearTracks"
                @on-ok="onHandleDeleteOK">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="ios-information-circle"></Icon>
                    <span>删除录音</span>
                </p>
                <p style="text-align:center;">是否删除{{this.deviceId}}的全部记录包括语音、轨迹、报警消息</p>
            </Modal>
            <Modal
                v-model="deleteRecordsModal">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="ios-information-circle"></Icon>
                    <span>删除记录</span>
                </p>
                <p style="text-align:center;">已删除语音条数 : {{deleteRecordsObject.removedmediacount}}</p>  
                <p style="text-align:center;">已删除消息条数 : {{deleteRecordsObject.removedmsgcount}}</p>
                <p style="text-align:center;">已删除报警条数 : {{deleteRecordsObject.removedalarmcount}}</p>
                <p style="text-align:center;">已删除轨迹条数 : {{deleteRecordsObject.removedtrackcount}}</p>
            </Modal>
            <Modal
                v-model="lichengModal">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="md-settings"></Icon>
                    <span>设置总里程</span>
                </p>
                <Row style="margin: 10px 0">
                    <i-col span="4" :offset="1" style="height: 100%;text-align:right;line-height:32px;">里程数(米) :</i-col>
                    <i-col span="16" :offset="1">
                        <i-input v-model.trim="meter"></i-input>
                    </i-col>
                </Row>
                <p slot="footer" style="">
                   <i-button type="primary" @click="onSettingLicheng" style="width:100%;">设置</i-button>
                </p>
            </Modal>
        </div>
    </script>

    <!-- 报警 -->
    <script type="text/x-template" id="waring-template">
        <div class="waring-wraper" :style="waringWraperStyle" v-if="activeComponent !== 'trackDebug'">
            <ul class="waring-controller" v-show="isLargen == 0">
                <li style="width:68px;border-left:1px solid #fff; "><span :class="{msgwaring:isWaring,msgnormal:!isWaring}">{{$t("alarm.message")}}</span></li>
                <li style="width:60px;cursor: pointer;border-right:1px solid #fff;">
                    <span @click="changeLargen(1)" :title="$t('alarm.open')"><Icon type="ios-browsers-outline" :size="14" /></span> 
                    <span @click="changeLargen(2)" :title="$t('alarm.max')" style="margin-left:10px;"><Icon type="ios-square-outline" :size="16"/></span>
                </li>   
            </ul>
            <div class="msg_main" v-show="isLargen !== 0">
                <div class="msg_header">
                    <ul>
                        <li :class="{selected:index == 1}" @click="changeComponent(1)">{{$t("alarm.alarmMsg")}}</li>
                        <li :class="{selected:index == 2}" @click="changeComponent(2)">{{$t("alarm.devMsg")}}</li>
                        <!-- <li @click="filterWaringType"> [{{$t("alarm.filterAlarmType")}}] </li> -->
                    </ul> 
                    <div class="shrink-btn">
                        <span @click="changeLargen(0)" :title="$t('alarm.min')">
                            <Icon type="md-remove" />
                        </span>
                        <span @click="changeLargen2()">     
                            <Icon type="ios-browsers-outline" :title="$t('alarm.changeWin')" />
                        </span>
                    </div>
                </div>
                <div class="msg_content">
                    <keep-alive>
                        <component 
                            :is="componentName" 
                            :tabletype="isLargen"
                            :waringrecords="waringRecords" 
                            :wrapperheight="wrapperHeight"
                            :deviceinfolist="overdueDevice" 
                            @deletemsg="deleteMsg"
                            @showdisposemodal="showDisposeModalFrame">
                        </component>
                    </keep-alive>
                </div>
            </div>

            <!-- 过滤报警模态 -->
            <Modal v-model="waringModal" width="600">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>{{$t('alarm.filterAlarmTitle')}}</span>
                </p>
                <div>
                    <Row style="margin: 10px 0" v-for="(item,index) in alarmTypeList" :key="index">
                        <i-col span="8" v-for="(type , index) in item" :key="type.alarmcode">
                            <Checkbox  v-model="checkboxObj[type.alarmcode]" >{{ isZh ? type.alarmname : type.alarmcode}}</Checkbox>
                        </i-col>
                    </Row>  
                </div>
                <div slot="footer">
                    <i-button type="primary"  @click="saveReqMsgParameter" style="width: 100%">{{$t("monitor.confirm")}}</i-button>
                </div>
            </Modal>

            <!-- 接触报警模态 -->
            <Modal v-model="disposeModal" width="560">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>{{$t('alarm.releaseAlarmTitle')}}</span>
                </p>
                <div>

                    <Row style="margin: 10px 0">
                        <i-col span="24" style="height: 100%;text-align:center;line-height:32px;">
                            {{$t('alarm.releaseAlarmTitle')}}
                        </i-col>
                    </Row>

                </div>
                <div slot="footer">
                    <i-button type="primary" style="width: 100%" @click="sendDisposeWaring">{{$t("monitor.confirm")}}</i-button>
                </div>
            </Modal>
        </div>
    </script>

    <script src="dist/vue.min.js"></script>
    <script src="dist/vuex.min.js"></script>
    <script src="js/v-click-outside-x.js"></script>
    <script src="js/vue-i18n.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/zh-CN.js"></script>
    <script src="js/en-US.js"></script>
    <script src="js/msgmgr.js"></script>
    <script src="js/ol.js"></script>
    <script src="js/openstreemap.js"></script>
    <script src="js/config.js"></script>
    <script src="js/pinyinhanzi.js"></script>
    <script src="js/alrammgr.js"></script>
    <script src="js/language.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/gps51-jquery.md5.js"></script>
    <script src="js/transformlatlon.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/hashmap.js"></script>
    <script src="js/localcachemgr.js"></script>
    <script src="js/util.js"></script>
    <script src="js/websocketmgr.js"></script>
    <script src="js/baidumap.js"></script>
    <script src="js/googlemap.js"></script>
    <script src="js/monitor.js"></script>
    <script src="js/reportform.js"></script>
    <script src="js/bgmanager.js"></script>
    <script src="js/alarmcomponent.js"></script>
    <script src="js/main.js"></script>
</body>

</html>